<template>
  <div class="chooseExamTimeContainer">
    <!-- 弹窗 -->
    <el-dialog v-model="store.openAddTime" title="选择考试时间" width="45%"  custom-class="timePickerDialog">
      <!--弹窗内容-->
      <el-form label-width="120px" class="exam-time-form">
        <el-form-item label="考试时间段">
          <el-date-picker
              v-model="form.dateRange"
              type="datetimerange"
              start-placeholder="考试开始时间"
              end-placeholder="考试结束时间"
              :disabled-date="disabledDate"
              :disabled-time="disabledTime"
              value-format="YYYY-MM-DD HH:mm:ss"
              style="width: 100%;"
              class="date-range-picker"
          />
        </el-form-item>
      </el-form>

      <!--弹窗底部 -->
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="closeDialog" class="el-button__default">取 消</el-button>
          <el-button type="primary" @click="confirmTime" :disabled="!isFormValid" class="el-button__primary">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import {ref, reactive, computed, defineEmits} from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { examBaseStore } from '@/stores/question/examStore'
import {publishExam} from "@/api/question/exam.ts";
const emit = defineEmits(['refresh'])
const store = examBaseStore()

// 表单数据
const form = reactive({
  dateRange: [] as string[], // 存储 [startTime, endTime]
})

// 开始时间和结束时间计算属性
const startTime = computed(() => form.dateRange[0])
const endTime = computed(() => form.dateRange[1])

// 表单校验：结束时间必须大于开始时间
const isFormValid = computed(() => {
  if (form.dateRange.length < 2) return false
  const start = new Date(startTime.value)
  const end = new Date(endTime.value)
  return end > start
})

// 禁用日期：不能选择今天以前的日期
const disabledDate = (time: Date) => {
  const now = new Date()
  now.setHours(0, 0, 0, 0)
  return time.getTime() < now.getTime()
}

// 可选：限制每天只能选择特定时间段，例如 9:00 - 18:00
const disabledTime = (date: Date, type: string) => {
  const hour = date.getHours()
  // 只允许选择 9:00 - 18:00
  return hour < 9 || hour >= 18;

}

// 关闭弹窗
const closeDialog = () => {
  store.setOpenAddTime(false)
  store.setExamBaseId(0)
  emit("refresh")
}

// 确认时间
const confirmTime = async () => {
  if (!isFormValid.value) {
    ElMessage.warning('请检查时间是否正确')
    return
  }

  ElMessageBox.confirm('发布考试后不可更改，确定发布?', '确认发布', {
    app: undefined, components: undefined, config: undefined, directives: undefined, mixins: [], provides: undefined,
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
    draggable: true
  }).then(async () => {
    const data={id:store.examBaseId,startTime:startTime.value,endTime:endTime.value}
    const res = await publishExam(data)
    ElMessage.success("发布考试成功")
    closeDialog()
  }).catch(() => {
  })
}




</script>

<style scoped>
.timePickerDialog {
  border-radius: 15px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
  padding: 20px;
}

.exam-time-form {
  margin-bottom: 20px;
}

.date-range-picker {
  border-radius: 8px;
  overflow: hidden;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.cancel-btn {
  background-color: #ffffff;
  color: #333;
  border: 1px solid #dcdfe6;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.cancel-btn:hover {
  background-color: #f0f2f5;
}

.confirm-btn {
  background-color: #409eff;
  color: #fff;
  border: none;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.confirm-btn:hover {
  background-color: #66b1ff;
}
</style>